<template>
  <div class="home">
    姓: <input v-model="firstName" type="text" > <br>
    名: <input v-model="lastName" type="text" > <br>
    全名：{{ fullName }}
    <RefsTest ref="refTest"></RefsTest>
    <PropsTest content="content1"></PropsTest>
    <PropsTest ></PropsTest>
  </div>
  
</template>

<script>
// @ is an alias to /src
import RefsTest from '@/components/RefsTest.vue'
import PropsTest from '@/components/PropsTest.vue'

export default {
  name: 'HomeView',
  data(){
    return {
      url:"www.fun.com",
      content1:"这是第一条props信息",
      content2:"这是第二条props内容",
      text:"v-bind的内容",
      firstName:"",
      lastName:""
    }

  },
  mounted(){
    console.log("refs放在组件上");
    console.log(this.$refs.refTest);
  },
  components:{
    RefsTest,
    PropsTest
  },
  computed:{
    fullName:{
      get(){
        if(this.firstName===""||this.lastName===""){
          return ""
        }
        return this.firstName +"-" + this.lastName
      }
    }

  },
 
}
</script>
 